<template>
  <div class="result-con">
    <!-- 结果列表 -->
    <vue-scroll
      class="scroll-ul"
    >
      <ul class="ul" >
        <li v-for="(item, index) in resultData" :key="index">
          <div class="li-title">
            <h2
              class="name"
              @click="goDetail(item.name)"
            >
              <p>
                <i class="iconfont icon-qiye"></i>
                <span v-html="`${item.name_wordlight}`"></span>
              </p>
            </h2>
            <span class="li-button">
              <!-- 收藏 -->
              <!-- <el-tooltip
                class="item"
                effect="dark"
                :content="!item.isCollect ? '收藏' : '取消收藏'"
                placement="top"
              >
                <a
                  class="collect el-icon-star-off"
                  :class="{
                    active: item.isCollect,
                    'el-icon-star-on': item.isCollect,
                    'el-icon-star-off': !item.isCollect,
                  }"
                  @click="collet(item, index)"
                ></a>
              </el-tooltip> -->
              <!-- 科创指数 -->
              <!-- <el-tooltip
                class="item"
                effect="dark"
                content="科创指数"
                placement="top"
              >
                <a class="score">
                  <i class="iconfont">&#xe6f8;</i> {{ item.pingfen }}分
                </a>
              </el-tooltip> -->
            </span>
          </div>
          <div class="li-content">
            <div class="img">
              <img
                v-if="item.logo_url && item.logo_url !== 'none'"
                :src="item.logo_url"
              />
              <img v-else src="@/assets/img/default.png" />
            </div>
            <div class="content">
              <div class="content-label">
                <span v-for="(i, index) in item.label" :key="index">
                  {{ i }}
                </span>
              </div>
              <ul class="content-info">
                <li>
                  <span class="icon"><i class="iconfont">&#xe66d;</i></span>
                  <span class="info-title">法定代表人:</span>
                  <a
                    :title=" item && item.oper_name ? item.oper_name : '-'"
                    >{{
                      item && item.oper_name
                        ? item.oper_name
                        : "-"
                    }}
                  </a>
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe7b3;</i></span>
                  <span class="info-title">注册资金:</span>
                  <a
                    :title="
                      item && item.regist_capi
                        ? numFormat(item.regist_capi)
                        : ''
                    "
                    >{{
                      item && item.regist_capi
                        ? numFormat(item.regist_capi)
                        : "-"
                    }}
                  </a>
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe614;</i></span>
                  <span class="info-title">成立时间:</span>
                  <a
                    :title="
                      item && item.start_date
                        ? item.start_date
                        : '-'
                    "
                    >{{
                      item && item.start_date
                        ? item.start_date
                        : "-"
                    }}</a
                  >
                </li>
                <li>
                  <span class="icon"><i class="iconfont">&#xe60c;</i></span>
                  <span class="info-title">注册地址:</span>
                  <a :title="item.latest_address ? item.latest_address : ''">{{
                    item.latest_address ? item.latest_address : "-"
                  }}</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </vue-scroll>
    <el-pagination
      background
      v-if="resultData && resultData.length > 0"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper"
      :current-page.sync="ipi"
      :page-size="ips"
      :total="total"
      class="elpagination"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props:['companyList','totalComp'],
  data() {
    return {
      ipi: 1,
      ips: 10,
      total: 0,
      resultAllData: [],
      resultData: [],
      scrollOps: {
        vuescroll: {
          mode: "native",
        },
        scrollPanel: {
          initialScrollX: false,
          initialScrollY: false,
          scrollingX: false,
          scrollingY: true,
        },
        rail: {
          background: "rgba(255,255,255,.1)",
          gutterOfEnds: "10px",
        },
        bar: {
          background: "#c7c8ca",
          size: "8px",
        },
      },
    };
  },
  mounted() {
    if (this.$route.query.ipi) {
      this.ipi = Number(this.$route.query.ipi);
    }
  },
  watch:{
    companyList:{
      handler:function(n,o){
        this.handleData(n);
      },
      immediate:true,
      deep:true,
    },
    totalComp:{
      handler:function(n,o){
        this.total = n;
      },
      immediate:true,
    },

  },
  methods: {
    numFormat(num) {
      var res = num.toString().replace(/\d+/, function(n) {
        // 先提取整数部分
        return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
          return $1 + ",";
        });
      });
      return res;
    },
    handleData(val){
      this.resultData = []
      if( val && val.length > 0 ){
        this.resultData = val
      }else{}
    },
    // 在进入企业详情之前，先判断后台是否生成数据
    goDetail(name) {
      localStorage.setItem(
        "enterpriseBack",
        JSON.stringify({
          name: "EISearchResult",
          query: {
            keyword: this.searchTxt,
            ipi: this.ipi,
          },
        })
      );
      let newName = name.replace(/[<em>|</em>]/g, "");
      this.$Bus.$emit("progressBar", newName);
    },
    // 分页
    handleCurrentChange(val) {
      this.$emit('changePageNumCom',val)
    },
  },
};
</script>
<style lang="scss" scoped>
.result-con {
  flex: auto;
  overflow: hidden;
  padding: 0.06rem 0.28rem 0.03rem 0.5rem;
  display: flex;
  flex-direction: column;
  background: #f6f7fb;
  .result-total {
    color: #838698;
    font-size: 0.14rem;
    line-height: 0.52rem;
    flex: none;
  }

  .scroll-ul {
    flex: auto;
    .ul {
      min-height:7rem;
      > li {
        display:inline-block;
        width: calc(50% - 0.22rem);
        height: 1.82rem;
        background: #fff;
        margin-bottom: 0.18rem;
        margin: 0.14rem 0.1rem 0.1rem ;
        padding: 0 0.2rem 0 0.16rem;
        overflow: hidden;
        border-radius: 0.08rem;
        box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
        .li-title {
          width: 100%;
          height: 0.46rem;
          line-height: 0.46rem;
          border-bottom: 1px solid #f7f7f7;
          margin-bottom: 0.13rem;
          .name {
            width: 75%;
            float: left;
            color: #3e4051;
            font-size: 0.2rem;
            font-weight: normal;
            p {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              ::v-deep em {
                color: $mainColor;
              }
              &:hover {
                font-weight: bold;
                // color: $mainColor;
              }
              i {
                display: inline-block;
                margin-right: .1rem;
                background-image: linear-gradient(50deg, $color55, $color56);
                background-clip:text;
                color: transparent;
              }
            }
          }
          .li-button {
            float: right;
            color: #9a9b9e;
            font-size: 0.18rem;
            cursor: default;
            .collect {
              margin-right: 0.24rem;
            }
            .el-icon-star-on {
              color: $color120;
              font-size: 0.22rem;
              margin-right: 0.22rem;
            }
            .score {
              font-size: 0.15rem;
            }
          }
        }
        .li-content {
          width: 100%;
          display: flex;
          .img {
            flex: none;
            width: 1.1rem;
            height: 1.1rem;
            border: 0.06rem solid #eeeff6;
            border-radius: 0.04rem;
            margin-right: 0.28rem;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              max-width: 100%;
              max-height: 100%;
              display: block;
              margin: auto;
            }
          }
          .content {
            flex: auto;
            overflow: hidden;
            background-color: transparent;
            .content-label {
              height: 0.2rem;
              overflow: hidden;
              margin-bottom: 0.09rem;
              span {
                display: inline-block;
                max-width: 1rem;
                height: 100%;
                line-height: 0.2rem;
                border-radius: 0.1rem;
                background: #c7f1f6;
                text-align: center;
                padding: 0 0.1rem;
                overflow: hidden;
                margin-right: 0.22rem;
                color: #2fb8c8;
                font-size: 0.12rem;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .content-info {
              display: flex;
              flex-wrap: wrap;
              li {
                width: 50%;
                height: 0.28rem;
                line-height: 0.28rem;
                margin-top: 0.12rem;
                color: #a6a8bc;
                font-size: 0.16rem;
                overflow: hidden;
                padding-right: 0.1rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                word-break: break-all;
                .icon {
                  display: inline-block;
                  height: 100%;
                  width: 0.28rem;
                  line-height: 0.28rem;
                  text-align: center;
                  background: $hoverColor;
                  border-radius: 0.08rem;
                  margin-right: 0.2rem;
                  color: #3d79e8;
                }
                .info-title {
                  display: inline-block;
                  width: 1.06rem;
                }
                > a {
                  color: #3d79e8;
                }
              }
            }
          }
        }
      }
    }
  }
  .el-pagination.is-background {
    text-align: right;
    font-weight: 700;
    margin: 0.2rem 0 0.24rem 0;
    padding: 0 0.3rem;
    ::v-deep .el-pager {
      li:not(.disabled).active {
        background: transparent;
        color: $mainColor;
      }
      li {
        color: #c1c6d2;
        font-size: 0.16rem;
        font-weight: 400;
        background: #f6f7fb;
      }
    }
    ::v-deep .btn-prev {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .btn-next {
      color: $mainColor !important;
      background: #f6f7fb;
      &:disabled {
        color: #c1c6d2 !important;
      }
      i {
        font-size: 0.2rem;
      }
    }
    ::v-deep .el-pagination__jump {
      color: #c1c6d2;
      font-size: 0.16rem;
      .el-input--medium .el-input__inner {
        height: 0.26rem;
        border: 1px solid $mainColor;
        border-radius: 0;
      }
    }
  }
}
</style>
